<!DOCTYPE html>
<html>
    <head>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <meta charset="utf-8">
        <meta name="renderer" content=webkit>
        <!-- 引入vue -->
        <script src="../js/vue.js"></script>
        <!-- 引入组件库 -->
        <script src="../js/jQyery.js"></script>
        <script src="../js/layer/layer.js"></script>
     
        <script src="../js/element/element.js"></script>
        <script src="../js/new.js"></script>

        <!-- 引入样式 -->
        <link  rel="stylesheet" href="../font/iconfont.css">
        <link rel="stylesheet" href="../js/element/element.css">
        <link rel="stylesheet" href="../css/main.css">
        <link rel="stylesheet" href="../css/maincontent.css">
        <link rel="stylesheet" href="../css/newindex.css">
        
    </head>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    <body>
        <div class="index_main"  onclick="hidediaolog()">
            <div class="index_mainhead" id="app" v-cloak >
                <div class="imh_left">
                    <img class="index_logo" src="../img/logowhite.png">
                    <el-tooltip class="item" effect="light" content="折叠" placement="right" v-if="!isCollapse" >
                        <img class="index_action" src="../img/logonext.png" v-on:click="changemenu">
                    </el-tooltip>

                    <el-tooltip class="item" effect="light" content="展开" placement="right" v-if="isCollapse">
                        <img class="index_action"  src="../img/right.png" v-on:click="changemenu">
                    </el-tooltip>
                  
                </div>
                <div class="imh_right">
                    <div class="right_notice" v-on:click.stop="shownoticedialog">
                        <el-badge :value="12" :max="99" class="item">
                            <img class="right_noticeimg" src="../img/jinbao.png">
                        </el-badge>
                        <div class="noticelist" v-if="shownotice">
                            <div class="noticediv">
                                <img src="../img/yiji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticediv">
                                <img src="../img/erji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticediv">
                                <img src="../img/sanji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticediv">
                                <img src="../img/yiji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticediv">
                                <img src="../img/erji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticediv">
                                <img src="../img/sanji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticebottom">
                                <span>点击查看更多</span>
                            </div>
                        </div>
                    </div>
                    <div class="title_rightdiv" v-on:click.stop="showlangdialog">
                        <img :src="langinfo.img">
                        <span style="margin-left: 0.1rem;color: #fff">{{langinfo.name}}</span>
                        <img src="../img/xlwhite.png" style="margin-left: 0.05rem;">
                    </div>
                    <div class="head_line">

                    </div>
                    <div class="head_loginout">
                        <img src="../img/tuichu.png">
                    </div>
                </div>

                <div class="changelang" v-if="showlang" style="right: 0.14rem;top: 0.86rem">
                    <template v-for="item in langlist">
                        <div class="landiv" :class="{choselandiv:item.img===langinfo.img}" v-on:click="chosethis(item)">
                            <img :src="item.img">
                            <span>{{item.name}}</span>
                        </div>
                    </template>
                    
                </div>
            </div>
            <div class="index_maincontent">
                <div class="imc_left" id="meun" v-cloak>
                    <div class="imc_userinfo" v-on:click.stop="showuserinfoactiondialog" v-if="!isCollapse">
                        <div class="userimg">
                            <img src="../img/tx.png">
                        </div>
                        <div class="userinfo" >
                            <div class="usertitle">
                                <span>智棚物联网</span>
                            </div>
                            <div class="userdesc">
                                <span>管理员</span>
                            </div>
                        </div>

                        <div class="userinfoaction" v-if="showuserinfoaction">
                            <div class="actionimg">
                                <img src="../img/sanjiao.png">
                            </div>
                            <div class="actionlist">
                                <div class="actiondiv">
                                    <span>基本资料</span>
                                </div>
                                <div class="actiondiv">
                                    <span>修改密码</span>
                                </div>
                                <div class="actiondiv">
                                    <span>退出</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="indexmenu">
                        <el-menu
                            ref="menu"
                            default-active="1"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            :collapse="isCollapse"
                            background-color="#1A2F70"
                            text-color="#dfdfdf"
                            :unique-opened="true"
                            :collapse-transition="false">
                            <el-menu-item index="2" v-on:click="hidefarmlist">
                                <i class="el-icon-s-home"></i>
                                <span slot="title">首页</span>
                            </el-menu-item>
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-s-grid"></i>
                                    <span>农场列表</span>
                                </template>
                                <el-menu-item-group class="seconditem" style="background: #253C82">
                                    <el-menu-item index="1-1">选项1</el-menu-item>
                                    <el-menu-item index="1-2">选项2</el-menu-item>
                                    <el-menu-item index="1-3">选项3</el-menu-item>
                                    <el-submenu index="1-4">
                                        <template slot="title">选项4</template>
                                        <el-menu-item class="thirditem" index="1-4-1" @click="showChoseType">选项1</el-menu-item>

                                        <el-popover
                                            placement="right"
                                            width="400"
                                            @show="showTypeValue"
                                            @hide="hideTypeValue"
                                            trigger="click">
                                            <el-radio-group v-model="typeValueNext">
                                                <el-radio :label="1">模式1</el-radio>
                                                <el-radio :label="2">模式2</el-radio>
                                                <el-radio :label="3">模式3</el-radio>
                                            </el-radio-group>
                                            <el-menu-item class="thirditem" slot="reference" index="1-4-2" >选项2</el-menu-item>
                                           
                                        </el-popover>
                                        
                                    </el-submenu>
                                </el-menu-item-group>
                            
                                
                           
                        
                            </el-submenu>
                         
                            <el-menu-item index="3" v-on:click="hidefarmlist">
                              <i class="el-icon-s-platform"></i>
                              <span slot="title">智能场景</span>
                            </el-menu-item>
                            <el-menu-item index="4" v-on:click="hidefarmlist">
                              <i class="el-icon-s-order"></i>
                              <span slot="title">智棚服务</span>
                            </el-menu-item>
                        </el-menu>
                    </div>
                    <div class="modeldiv" v-if="showTypeValueNext">

                    </div>
                    <el-dialog
                        title="重要提示"
                        :visible.sync="dialogVisibleType"
                        :modal-append-to-body="false"
                        width="30%">
                        <el-radio-group v-model="typeValue">
                            <el-radio :label="1">模式1</el-radio>
                            <el-radio :label="2">模式2</el-radio>
                            <el-radio :label="3">模式3</el-radio>
                        </el-radio-group>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisibleType = false">取 消</el-button>
                            <el-button type="primary" @click="dialogVisibleType = false">确 定</el-button>
                        </span>
                    </el-dialog>
                </div>
                <div class="imc_right" id="content" v-cloak>
                    <div class="imc_righthead">
                        <span>首页</span>
                    </div>
                    <div class="mainright_content">
                        <div class="fc_maindiv">
                            <div class="fc_maindivhead">
                                <div class="fchead_left">
                                        <div class="hoverdiv">
                                            <div class="fcleft_div fcleft_sy">
                                                <div class="fcldiv_left">
                                                    <div class="fcldl_title">
                                                        <span>首页</span>
                                                    </div>
                                                    <div class="fcldl_desc">
                                                        <span>home page</span>
                                                    </div>
                                                </div>
                                                <div class="fcldiv_right">
                                                    <img src="../img/sy.png">
                                                </div>

                                                <img src="../img/xz.png" style="width: 0.31rem;position: absolute;
                                                top: -1px;right: 0;">
                                            </div>
                                        </div>
                                        <div class="hoverdiv">
                                            <div class="fcleft_div" style="background: #00B43E">
                                                <div class="fcldiv_left">
                                                    <div class="fcldl_title">
                                                        <span>设备控制</span>
                                                    </div>
                                                    <div class="fcldl_desc">
                                                        <span>Equipment control</span>
                                                    </div>
                                                </div>
                                                <div class="fcldiv_right">
                                                    <img src="../img/xmkz.png">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="hoverdiv">
                                            <div class="fcleft_div" style="background: #6470E8">
                                                <div class="fcldiv_left">
                                                    <div class="fcldl_title">
                                                        <span>系统报警</span>
                                                    </div>
                                                    <div class="fcldl_desc">
                                                        <span>System alarm</span>
                                                    </div>
                                                </div>
                                                <div class="fcldiv_right">
                                                    <img src="../img/baojing.png">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="hoverdiv">
                                            <div class="fcleft_div" style="background: #FB8B8B;">
                                                <div class="fcldiv_left">
                                                    <div class="fcldl_title">
                                                        <span>传感数据</span>
                                                    </div>
                                                    <div class="fcldl_desc">
                                                        <span>Sensing data</span>
                                                    </div>
                                                </div>
                                                <div class="fcldiv_right">
                                                    <img src="../img/cgq.png">
                                                </div>
                                            </div>
                                        </div>
                                   

                                        <div class="hoverdiv">
                                            <div class="fcleft_div" style="background: #1B8CE4">
                                                <div class="fcldiv_left">
                                                    <div class="fcldl_title">
                                                        <span>视频监控</span>
                                                    </div>
                                                    <div class="fcldl_desc">
                                                        <span>Video surveillance</span>
                                                    </div>
                                                </div>
                                                <div class="fcldiv_right">
                                                    <img src="../img/spjk.png">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="hoverdiv">
                                            <div class="fcleft_div" style="background: #EC7147">
                                                <div class="fcldiv_left">
                                                    <div class="fcldl_title">
                                                        <span>参数设置</span>
                                                    </div>
                                                    <div class="fcldl_desc">
                                                        <span>Parameter setting</span>
                                                    </div>
                                                </div>
                                                <div class="fcldiv_right">
                                                    <img src="../img/cssz.png">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="hoverdiv">
                                            <div class="fcleft_div" style="background: #C34AD3">
                                                <div class="fcldiv_left">
                                                    <div class="fcldl_title">
                                                        <span>历史数据</span>
                                                    </div>
                                                    <div class="fcldl_desc">
                                                        <span>historical data</span>
                                                    </div>
                                                </div>
                                                <div class="fcldiv_right">
                                                    <img src="../img/lssj.png">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="hoverdiv">
                                            <div class="fcleft_div" style="background: #42AFF8;">
                                                <div class="fcldiv_left">
                                                    <div class="fcldl_title">
                                                        <span>统计分析</span>
                                                    </div>
                                                    <div class="fcldl_desc">
                                                        <span>statistical analysis</span>
                                                    </div>
                                                </div>
                                                <div class="fcldiv_right">
                                                    <img src="../img/tjfx.png">
                                                </div>
                                            </div>
                                        </div>
                                    
                                    
                                </div>
                                <div class="fchead_right">
                                    <div class="fcr_left">
                                        <div class="fcrl_top">
                                            <img src="../img/qing.png">
                                        </div>
                                        <div class="fcrl_bottom">
                                            <span>晴</span>
                                        </div>

                                    </div>
                                    <div class="fcr_right">
                                        <div class="fcrr_top">
                                            <span>27°C-35°C</span>
                                        </div>
                                        <div class="fcrr_bottom">
                                           <span>北京 2020-07-28</span>
                                           <span>风向:无持续风向</span>
                                           <span>风力:<3级</span>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                           <div class="fc_maindivcontent">
								
								<div class="fc_content" v-if="btnActive==0">
									<div class="fcc_left">
										<!-- <el-table
										stripe
											:data="tableData"
											class="contorltablediv"
											style="width:100%;margin-top:0.4rem;border:1px solid #ECECEF;border-bottom: 0px;">
											<el-table-column
											
												label="站点名称">
												<template slot-scope="scope">
												
													
													<div class="devicename">
													
														<span>{{ scope.row.stationName }}</span>
													</div>
												
												</template>
											</el-table-column>
											<el-table-column
												label="运行程序">
												<template slot-scope="scope">
													<div class="devicename">
											
														<span>{{ scope.row.exeName }}</span>
													</div>
													
												</template>
											</el-table-column>
											<el-table-column
												label="模式">
												<template slot-scope="scope">
													<div class="devicename">
									
														<span>{{ scope.row.model }}</span>
													</div>
												</template>
											</el-table-column>
											<el-table-column
											
												label="剩余时间"
												>
												<template slot-scope="scope">
													<div class="devicename">
															
														<span>{{ scope.row.time }}</span>
													
													</div>
												</template>
											</el-table-column>
										
                                        </el-table> -->
                                        
                                        <div class="fccl_main">
                                            <div class="fcclm_content">
                                                <div class="fcclmc_title">
                                                    <span>自动</span>
                                                </div>
                                                <div class="fcclmc_contnet">
                                                    <div class="fcclmc_img">
                                                        <img src="../img/autopaly.png">
                                                    </div>
                                                    <div class="fcclmc_right">
                                                        <div class="fcclmcr_title">
                                                            <span>程序下次启动时间</span>
                                                        </div>
                                                        <div class="fcclmcr_text">
                                                            <span>2020-08-07 12 : 30 : 20</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- <div class="fccl_main">
                                            <div class="fcclm_content">
                                                <div class="fcclmc_title">
                                                    <span>暂停运行</span>
                                                </div>
                                                <div class="fcclmc_contnet">
                                                    <div class="fcclmc_img">
                                                        <img src="../img/pause_stop.png">
                                                    </div>
                                                    <div class="fcclmc_right" style="flex:1">
                                                        <div class="fcclmcr_title" style="font-size:0.18rem;justify-content:space-between">
                                                            <span>剩余暂停时间:</span>
                                                            <span>00:20:00</span>
                                                        </div>
                                                        <div class="fcclmcr_text">
                                                            <el-progress :percentage="20" color="#409eff" :show-text="false" :stroke-width="12"></el-progress>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> -->

                                        <!-- <div class="fccl_main">
                                            <div class="fcclm_content fcclm_contentnext">
                                                <div class="fcclmc_title" style="width:3rem;">
                                                    <span>自动控制已关闭</span>
                                                </div>
                                                <div class="fcclmc_contnet">
                                                    <div class="fcclmc_img">
                                                        <img src="../img/ready_close.png">
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                        </div> -->
									</div>
									<div class="fcc_right">
										<div class="fccr_div" @click.stop="showaction(0)" @mouseenter="over(0,$event)" @mouseleave="out(0,$event)">
											<img src="../img/pause_stop.jpg" class="stopmainimg">
                                            <span style="color:#7A808E" class="stopmainspan">停止</span>
                                            
                                            <div class="fccrd_out" v-if="showstop">
                                                <div class="fco_div">
                                                    <i class="iconfont icontingzhi1"></i>
                                                    <span>停止当前自动控制</span>
                                                </div>
                                                <div class="fco_div">
                                                    <i class="iconfont iconzanting"></i>
                                                    <span>暂停运行</span>
                                                </div>
                                                <div class="fco_div">
                                                    <i class="iconfont iconguanbi"></i>
                                                    <span>关闭自动控制</span>
                                                </div>
                                            </div>
                                            <div class="triangle_right" v-if="showstop">

                                            </div>
                                        </div>
                                        
                                        <!-- <div class="fccr_div"   @mouseenter="over(3,$event)" @mouseleave="out(3,$event)">
											<img src="../img/recove.jpg" class="recovemainimg">
                                            <span style="color:#7A808E" class="recovemainspan">恢复</span>
                                            
                                            
										</div> -->
										<div class="fccr_div" @click.stop="showaction(1)" @mouseenter="over(1,$event)" @mouseleave="out(1,$event)">
											<img src="../img/handbengin.jpg" class="handmainimg">
                                            <span style="color:#7A808E" class="handmainspan">手动启动</span>
                                            
                                            <div class="fccrd_out" v-if="showhand">
                                                <div class="fco_div">
                                                    <i class="iconfont iconshoudongyunhangzhandian"></i>
                                                    <span>手动运行站点</span>
                                                </div>
                                                <div class="fco_div">
                                                    <i class="iconfont iconshoudongyunhangchengxu"></i>
                                                    <span>手动运行程序</span>
                                                </div>
                                                
                                            </div>
                                            <div class="triangle_right" v-if="showhand">

                                            </div>
										</div>
										<div class="fccr_div" @click="showdialog" @mouseenter="over(2,$event)" @mouseleave="out(2,$event)">
											<img src="../img/statusbtn.jpg" class="statusmainimg">
											<span style="color:#7A808E" class="statusmainspan">运行状态</span>
										</div>
									</div>
								
	
								</div>
								<div class="fc_content" v-if="btnActive==1">

                                </div>
                                
                           </div>
                        </div>
                    </div>

                    <el-dialog title="运行状态" :visible.sync="dialogTableVisible">
                        <el-table :data="gridData" stripe>
                            <el-table-column property="device" label="水泵">

                            </el-table-column>
                            <el-table-column property="liuliang" label="流量" >

                            </el-table-column>
                            <el-table-column property="yali" label="压力">

                            </el-table-column>
                            <el-table-column property="yewei" label="水源液位">

                            </el-table-column>
                        </el-table>
                    </el-dialog>
                </div>
            </div>

        </div>
    </body>

</html>
<script>
    var headvue=new Vue({
        el: '#app',
        data(){
            return {
                langinfo:{
                    name:"简体中文",
                    img:'../img/cn.png'
                },
                showlang:false,
                shownotice:false,
                isCollapse:false,
                langlist:[
                    {
                        img:'../img/cn.png',
                        name:'简体中文'
                    },
                    {
                        img:'../img/yy.png',
                        name:'English'
                    },
                    {
                        img:'../img/yy.png',
                        name:'English'
                    },
                    {
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },

                ],
              
          
                
               
             
                
                
            }
        },
        computed: {
            
        },
        created() {
           
        },
        mounted(){
            
         
           
        },
        methods:{
          
            showlangdialog(){
                this.showlang=!this.showlang;
                this.shownotice=false;
                this.showuserinfoaction=false
            },
            hidediaolog(){
                this.showlang=false;
                this.shownotice=false;
                this.showuserinfoaction=false
            },
            showuserinfoactiondialog(){
                this.showuserinfoaction=!this.showuserinfoaction;
                this.shownotice=false;
                this.showlang=false;
            },
            chosethis(item){
                this.langinfo=item
                this.showlang=false;
            },
            shownoticedialog(){
                this.shownotice=!this.shownotice;
                this.showlang=false;
                this.showuserinfoaction=false
               

            },
              changemenu(){
                this.isCollapse=!this.isCollapse
                if(this.isCollapse){
                    $(".el-submenu__title span").hide();
                    $(".el-menu-item span").hide();
                    $(".el-submenu__title i").eq(1).hide();
                    $(".imc_left").css({"width":"auto","min-width":"auto"})
                    $(".indexmenu").css("height","100%")
                    
                }
                else{
                    $(".imc_left").css({"width":"2.6rem","min-width":"200px"})
                    $(".indexmenu").css("height","calc(100% - 0.96rem)")
                }
            },
        },
        watch:{
            isCollapse(){
                meun.isCollapse=this.isCollapse
            }
        }
    })
    var meun=new Vue({
        el: '#meun',
        data(){
            return {
                showuserinfoaction:false,
                isCollapse:false,
                dialogVisibleType:false,
                typeValue:'',
                typeValueNext:'',
                showTypeValueNext:false,
            }
        },
        computed: {
            
        },
        created() {
           
        },
        mounted(){
            
         
           
        },
        methods:{
           
            hidediaolog(){
                this.showlang=false;
                this.shownotice=false;
                this.showuserinfoaction=false
            },
            showuserinfoactiondialog(){
                this.showuserinfoaction=!this.showuserinfoaction;
                this.shownotice=false;
                this.showlang=false;
            },
         

            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
          
            
            hidefarmlist(){
                this.$refs["menu"].close("1")
            },
            showChoseType(){
                this.dialogVisibleType=true;
            },
            showTypeValue(){
                this.showTypeValueNext=true;
            },
            hideTypeValue(){
                this.showTypeValueNext=false;
            }

        },
        watch:{
            typeValueNext(){
                console.log(this.typeValueNext)
            }
        }
    })
    var content=new Vue({
        el: '#content',
        data(){
            return {
				btnActive:0,
				tableData:[
					{
						stationName:"站点已",
						exeName:'程序1',
						model:'手动',
						time:'03:30:10'

					},
					{
						stationName:"站点已",
						exeName:'程序1',
						model:'手动',
						time:'03:30:10'

					}
                ],
                showhand:false,
                showstop:false,
                dialogTableVisible:false,
                gridData:[
                    {
                        device:1,
                        liuliang:'0 m³/h',
                        yali:'1.2 BAR',
                        yewei:'1.2 m'
                    },
                    {
                        device:1,
                        liuliang:'0 m³/h',
                        yali:'1.2 BAR',
                        yewei:'1.2 m'
                    }
                ],
                timeout:null,
                timein:null,


                selectstop:false,
                selecthand:false,
                selectstatus:false,
                selectrecove:false,
                
            }
        },
        computed: {
            
        },
        created() {
           
        },
        mounted(){
         
         
           
        },
        methods:{
            
			setBtnActive(index){
				this.btnActive=index
			},
            showaction(e){
                console.log(e)
                if(e==0){
                    this.showstop=true;
                    this.showhand=false;
                    this.selectstop=true;
                    this.selecthand=false;
                    this.selectstatus=false;
                }
                if(e==1){
                    this.showstop=false;
                    this.showhand=true;
                    this.selectstop=false;
                    this.selecthand=true;
                    this.selectstatus=false;
                }
                let _this=this;
                document.onclick = function(){
                    _this.showstop=false;
                    _this.showhand=false;
                    _this.selectstop=false;
                    _this.selecthand=false;
                 
                    
                }
            },
            showdialog(){
                this.dialogTableVisible=true;
            },
            showStoplan(){
                $(".stopmainimg").attr("src","../img/pause_stop_select.jpg");
                $(".stopmainspan").css("color","#478EE4")

            },
            showHandlan(){
                $(".handmainimg").attr("src","../img/handbengin_select.jpg");
                $(".handmainspan").css("color","#478EE4")
            },
            showStatuslan(){
                $(".statusmainimg").attr("src","../img/statusbtn_select.jpg");
                $(".statusmainspan").css("color","#478EE4")
            },
            showRecovelan(){
                $(".recovemainimg").attr("src","../img/recove_select.jpg");
                $(".recovemainspan").css("color","#478EE4")
            },



            hideStoplan(){
                $(".stopmainimg").attr("src","../img/pause_stop.jpg");
                $(".stopmainspan").css("color","#7A808E")
            },
            hideHandlan(){
                $(".handmainimg").attr("src","../img/handbengin.jpg");
                $(".handmainspan").css("color","#7A808E")
            },
            hideStatuslan(){
                $(".statusmainimg").attr("src","../img/statusbtn.jpg");
                $(".statusmainspan").css("color","#7A808E")
            },
            hideRecovelan(){
                $(".recovemainimg").attr("src","../img/recove.jpg");
                $(".recovemainspan").css("color","#7A808E")
            },
            


            over(index,e){
                if(this.timeout){
                    clearTimeout(this.timeout);
                }
                if(index==0){
                    this.selectstop=true;
                    if(!this.showhand){
                        this.selecthand=false;
                    }
                   
                    this.selectstatus=false;
                }
                if(index==1){
                    if(!this.showstop){
                        this.selectstop=false;
                    }
                   
                    this.selecthand=true;
                    this.selectstatus=false;
                    this.selectrecove=false;
                }
                if(index==2){
                    if(!this.showstop){
                        this.selectstop=false;
                    }
                    if(!this.showhand){
                        this.selecthand=false;
                    }
                    this.selectstatus=true;
                    this.selectrecove=false;
                }
                if(index==3){
                   
                    if(!this.showhand){
                        this.selecthand=false;
                    }
                    this.selectstatus=false;
                    this.selectrecove=true;
                }
            },
            out(index,e){
                console.log(e)
                if(index==0){
                    if(!this.showstop){
                        this.timeout=setTimeout(()=>{
                            this.selectstop=false;
                        },500)
                    }
                }
                if(index==1){
                    if(!this.showhand){
                        this.timeout=setTimeout(()=>{
                            this.selecthand=false;
                        },500)
                    }
                }
               
                if(index==2){
                    if(!this.dialogTableVisible){
                        this.timeout=setTimeout(()=>{
                            this.selectstatus=false;
                        },500)
                    }
                }
                if(index==3){
                    this.selectrecove=false;
                }
                
               
              
            }
        
        },
        watch:{
            dialogTableVisible(){
                if(!this.dialogTableVisible){
                    this.selectstatus=false;
                }
                else{
                    this.selectstatus=true;
                }
            },
            selectstop(){
                if(this.selectstop){
                    this.showStoplan()
                }
                else{
                    this.hideStoplan();
                }
            },
            selecthand(){
                if(this.selecthand){
                    this.showHandlan();
                }
                else{
                    this.hideHandlan();
                }
            },
            selectstatus(){
                if(this.selectstatus){
                    this.showStatuslan();
                }
                else{
                    this.hideStatuslan();
                }
            },
            selectrecove(){
                if(this.selectrecove){
                    this.showRecovelan();
                }
                else{
                    this.hideRecovelan();
                }
            }
        }
    })
   
</script>
<script src="../js/index.js"></script>